//搜索栏下面
$.ajax({
    type: 'get',
    url: '../json/search.json',
    async: true,
    success: function (data) {
        var searchArr = data.search;
        for (var i = 0; i < searchArr.length; i++) {
            var node = $(`<a href="" class="curr">${searchArr[i].name}</a>`);
            node.appendTo(".search #hotWord");

        }
    }
})
//左边商品列表
$.ajax({
    type: 'get',
    url: '../json/allsort1.json',
    async: true,
    success: function (data) {
        let sideArr = data.sideNav;
        for (var i = 0; i < sideArr.length; i++) {
            let node = $(`<li class = "licontent">
                <a href = "${sideArr[i].href}" class = "title">
                    ${sideArr[i].title}
                </a>
                </li>`);
                
            node.appendTo(".nav #ul_level12");
        }     
    }
})
// $.ajax({
//     type: 'get',
//     url: '../json/allsort1.json',
//     async: true,
//     success: function (data) {
//         let sideArr = data.sideNav.child;
//         for (var i = 0; i < sideArr.length; i++) {
//             var node = $(`<div class="sub_zt hide" data-id="1" style="display: block;">
//             <dl>
//                <dt><a>${sideArr.name}</a></dt>    
//                <dd><i></i></dd>
//            </dl> 
//        </div>`);
//                 console.log(sideArr);
//             node.appendTo(".nav_right_zt");
//         }     
//     }
// })
//顶部菜单导航
$.ajax({
    type: 'get',
    url: '../json/allsort1.json',
    async: 'true',
    success: function (data) {
        var topArr =data.topNav;
        for(var i = 0;i < topArr.length;i ++){
            var node = $(`<li><a href="">
                ${topArr[i].title}
            </a></li>`);
            node.appendTo(".nav #licontent");
        }
    }

})



//轮播图
class Swiper {
    constructor() {
        this.w = $('.swiper-item').width();
        this.num = 0;
        this.len = $('.swiper .swiper-item').length - 1;
        this.timer = null;
    }
    init() {
        //设置定时器
        this.setTime();
        //滑上停止定时器
        this.hover();
        //点击指示
        this.pointClick();
        //点击左右箭头
        this.lrClick();
    }
    setTime() {
        this.timer = setInterval(() => {
            this.num++;
            if (this.num > this.len) {
                this.num = 0;
            }
            let cssTrx = -this.num * this.w;
            $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
            $('.swiper').css({ transform: `translateX(${cssTrx}px)` })
        }, 3000)
    }
    hover() {
        $('.swiper-contione').hover(() => {
            clearInterval(this.timer)
        }, () => {
            this.setTime();
        });
    }
    pointClick() {
        let that = this;
        $('.swiper-point-item .point').click(function () {
            that.num = $(this).index();
            let cssTrx = -that.num * that.w;
            $(this).addClass('active').siblings().removeClass('active');
            $('.swiper').css({
                transform: `translateX(${cssTrx}px)`
            })
        })
    }
    lrClick() {
        $('.swiper-left img').click(() => {
            this.num--;
            if (this.num < 0) {
                this.num = this.len;
            };
            console.log(this.num)
            let cssTrx = -this.num * this.w;
            $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
            $('.swiper').css({
                transform: `translateX(${cssTrx}px)`
            })
        });

        $('.swiper-right img').click(() => {
            this.num++;
            if (this.num > this.len) {
                this.num = 0;
            }
            let cssTrx = -this.num * this.w;
            $('.swiper-point-item .point').eq(this.num).addClass('active').siblings().removeClass('active');
            $('.swiper').css({
                transform: `translateX(${cssTrx}px)`
            })
        })
    }
}
let sw = new Swiper();
sw.init();
